// Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/

@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

@mixin btn-gradient-strip {
  color: #fff;
  text-decoration:none;
  -moz-border-bottom-colors: #70c9e4 #70c5b7;
  background: -moz-linear-gradient(top left, #70c9e4, #70c5b7); /*firefox*/
  background: -ms-linear-gradient(top left, #70c9e4, #70c5b7); /* IE 10 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#70c9e4), to(#70c5b7));/* Safari 4-5, Chrome 1-9*/
  background: -webkit-linear-gradient(top left, #70c9e4, #70c5b7); /*Safari5.1 Chrome 10+*/
}

@mixin has2ColumnPageMainBase {
  width: calc(100% - #{$sideNavWidth});
  margin-left: $sideNavWidth;
}

@mixin mobileMenuBase {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: $mobileMenuBaseZ-index;
}

@mixin mobileMenuBackgroundBase {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://mydevasset.blob.core.windows.net/system-container/image/icon_hover_bg.png") 0 0 / cover no-repeat;
  z-index: $mobileMenuBaseZ-index + 1;
  opacity: 0.8;
}

@mixin mobileMenuInnerBase {
  position: absolute;
  padding: 0 $grid-basic 150px;
  height: calc(100vh - 16px);
  width: calc(100vw - 16px);
  margin: 8px;
  z-index: $mobileMenuBaseZ-index + 2;
  background-color: transparentize(#FFF, 1-0.8);
  overflow: auto;
}